學會使用Cache API後，默默的我們已經能搭配，Fetch API來實現Service Worker的Offline特色，
從前面幾天中，我們在載入頁面之後，

再install事件觸發時，我們將很少出現變化的資源加入名為Static(命名隨意)的快取資源中，
接著透過fetch事件，讓我們有能力，動態捕捉不需要第一時間就cache的資源，
放入Dynamic的快取資源中，
到這邊為止，當瀏覽過網站，再無網路的情境下，使用者仍然能繼續瀏覽網站上的內容，
而不會因為網路不穩或搭個電梯就出現瘋狂轉圈圈等待的窘境。

但是...

小恐龍還活著

你會說不是已經，將快取的資源都捕捉到了嗎?
什麼情境會讓小恐龍出現呢?
從前面幾天測試的頁面都很順利，能擊退小恐龍，
但是你會發現有個問題，我們都只在同一頁做測試，
而且我們一定要先再有網路的情況至少載入網頁一次，
才會觸發到Cache的時機，

如果，今天我多了一頁關於我的頁面，當我從來沒有瀏覽過那頁，
而在沒有網路的前提下，首頁瀏覽的狀況，跟我們之前一樣會完整呈現

而今天，我們突如起來點到其他頁面之後，會出現。

看到這個頁面，會傻眼，那我們快取其他資源，不就沒有意義了嗎?
因此，今天要試做防呆頁面，專門給正在瀏覽的使用者，再沒網路的情況下，
假如使用者點到沒有看過的頁面時，判斷有沒有抓過快取資料，
假如沒有快取，就導向預先做好的錯誤頁面。

Step 1 : 建立頁面

• 建立「aboutUs/about.html」，用來作情境測試的頁面。
• 「offlinePage.html」，沒網路且沒瀏覽過的頁面時，導向此頁。

頁面內容不重要，在此我就不貼原始碼，
要做最簡單的測試，也可以直接設定body背景顏色，可以很快的看出有沒有成功。

Step 2：修改static的快取內容

      caches.open(CACHE_STATIC)
        .then(function(cache){
            cache.addAll([
                '/',
                '/index.html',
                '/offlinePage.html',
               ...
            ]);   
        })  
    ); 

再一開始install時，將替代頁面順便cache，
當使用者發出沒有再cache中的資源時，就將資源替換成此網頁。

Step 3：修改fetch與cache策略

self.addEventListener('fetch', function(event){
    var url = 'https://httpbin.org/get';
    if(-1 <　event.request.url.indexOf(url)){
    //當對應到一致的url
        event.respondWith(
            caches.open(CACHE_DYNAMIC)
                .then(function(cache){
                    return fetch(event.request)
                            .then(function(response){
                            cache.put(event.request, response.clone());
                            return response;
                            });
                })      
        );
    } else{
    //其他資源
        event.respondWith(
             caches.match(event.request)
                .then(function(response){
                  //當快取抓到資源時做處理
                })
                //重點在此
                .catch(function(err){
                    return caches.open(CACHE_STATIC)
                            .then(function(cache){
                                return cache.match('/offlinePage.html');
                            });
                })
        );
    }
});

當我們看到小恐龍是因為在沒有網路的情況下，cache.match也找不到資源時，她就會直接顯是無此網頁。
所以，我們要做的就是再後面加上catch，
並將offlinePage的頁面代替原本的頁面回傳給使用者。

結果

about.html

預設有網路的情況下，顯示上方畫面。

1. 執行網站，有網路情況瀏覽首頁「/」。
   

2. 打勾「Offline」，確保現在無網路，並再更新一次網頁，確保原本的cache都正常運作。

3. 再無網路的情況下，點選「About Me」連結。
   

4.成功!

看網址確實是點選「about.html」，使用者也沒有瀏覽過網頁，但是重點是網站沒有直接掛掉
這樣即使頁面內容出不來，也不會讓使用者覺得網站有問題而直接滑掉網站。